//   图片轮播数据添加
// 1.实现图片上传功能, 并且将上传后的图片地址保存在一个隐藏域中
// 2.为图片轮播表单中的每一个表单项添加name属性, name属性的值要和接口中要求的参数名保持一致
// 3.为图片轮播表单绑定表单提交事件, 在事件处理函数中阻止表单默认提交行为
// 4.获取到管理员在表单中输入的内容
// 5.向服务器端发送内容,实现图片轮播数据添加功能,如果数据添加成功,刷新页面

// 当管理员选择文件的时候
$('#file').on('change', function () {
	// 用户选择到的文件
	var file = this.files[0];
	// 创建formData对象实现二进制文件上传
	var formData = new FormData();
	// 将管理员选择到的文件添加到formData对象中
	formData.append('avatar', file);
	// 向服务器端发送请求 实现图片上传
	$.ajax({
		method: 'post',
		url: 'http://39.101.191.123:3000/upload',
		data: formData,
		processData: false,
		//  让 $.ajax在内部不要处理formData这个参数的格式
		contentType: false,
		//   让$.ajax在内部不要设置content-Type这个属性的值
		success: function (response) {
			console.log(response[0].avatar)
			$('#image').val(response[0].avatar)
		}
	})
});

// 当轮播图表单发生提交行为时
$('#slidesForm').on('submit', function (e) {
	// 1. 阻止默认的提交行为
	e.preventDefault()
	// 获取管理员在表单中输入的内容
	var formData = $(this).serialize();
	// 向服务器端发送请求 添加轮播图数据
	$.ajax({
		method: 'post',
		url: 'http://39.101.191.123:3000/slides',
		data: formData,
		success: function () {
			// 让页面中显示最新的数据
			location.reload();
		}
	})

})
// 向服务器端发送请求 索要图片轮播列表数据
$.ajax({
	method: 'get',
	url: 'http://39.101.191.123:3000/slides',
	success: function (response) {
		console.log(response);

		var html = template('slidesTpl', { data: response });
		$('#slidesBox').html(html);
	}
})


//1.通过事件委托方式为删除按钮添加点击事件
//2.在事件处理函数中弹出删除确认框
//3.获取到要删除数据的id
//4.向服务器发送请求,执行删除操作,删除操作成功后刷新页面


// 当删除按钮被点击时
$('#slidesBox').on('click', '.delete', function () {
	// 如果用户点击确定按钮，则 confirm() 返回 true。
	// 如果点击取消按钮，则 confirm() 返回 false。
	if (confirm('您真的要进行删除操作吗')) {
		// 获取管理员要删除的轮播图数据id
		var id = $(this).attr('data-id');
		// 向服务器发送请求 实现轮播数据删除功能
		$.ajax({
			method: 'delete',
			url: 'http://39.101.191.123:3000/slides/' + id,
			success: function () {
				// 刷新页面
				location.reload();
			}
		})
	}
});

